@use "../../../tokens";

.dialog {
  background-color: tokens.$color-white;
  border-radius: tokens.$border-radius-md;
  display: flex;
  flex-direction: column;
  max-height: calc(100% - (2 * tokens.$spacing-md));
  max-width: tokens.$content-lg;
  outline: none;
  overflow-y: auto;
  position: relative;
  width: calc(100% - (2 * tokens.$spacing-md));

  .header,
  .content {
    align-items: center;
  }

  .header {
    @include tokens.no-focus-outline;
    display: flex;
    flex-direction: column;
    gap: tokens.$spacing-md;
    padding: tokens.$layout-sm tokens.$layout-sm tokens.$spacing-sm;

    @media screen and (min-width: tokens.$screen-lg) {
      padding: tokens.$layout-md tokens.$layout-xl tokens.$spacing-sm;
    }
  }

  .content {
    padding: tokens.$spacing-sm tokens.$layout-sm tokens.$layout-sm;

    @media screen and (min-width: tokens.$screen-lg) {
      padding: tokens.$spacing-sm tokens.$layout-xl tokens.$layout-md;
    }
  }

  .title {
    color: tokens.$color-grey-50;
    font: tokens.$text-title-2xs;
    line-height: 1.5;
    text-align: center;

    b {
      color: tokens.$color-purple-70;
    }
  }

  .dismissButton {
    background: none;
    border: none;
    color: tokens.$color-grey-50;
    cursor: pointer;
    padding: tokens.$spacing-md;
    position: absolute;
    right: 0;
    top: 0;

    &:hover {
      color: tokens.$color-grey-40;
    }
  }

  .illustrationWrapper {
    display: flex;
    justify-content: center;
    pointer-events: none;
    user-select: none;
  }

  ul,
  ol {
    display: flex;
    flex-direction: column;
    gap: tokens.$spacing-sm;
  }

  &.fitContent {
    max-width: tokens.$content-sm;
    width: auto;

    .header {
      padding: tokens.$layout-sm tokens.$layout-sm tokens.$spacing-xs;
    }
    .content {
      padding: tokens.$spacing-xs tokens.$layout-sm tokens.$layout-sm;
    }
  }
}
